<template>
	<view class="goodsItem" @click="handleJumpDetails(data.goodsId)">
		<view class="goodsImgBox">
			<image class="cover" fit="cover" :src="goodsImage"></image>
			<view :class="{'goodsImgXiaJia':data.type == 0,'goodsImgZaiShou':data.type == 1}">
				{{data.type==0?'已下架':'在售'}}
			</view>
		</view>
		<view class="goodsItemContent">
			<view class="goodsItemContentBox1">
				<text class="goodsTitle" :style="{
					color: data.type==1 ? '#000000' : '#666666'}">{{data.goodsName}}</text>
				<view>
					<text class="browseNum">浏览量：{{data.viewsNum}}</text>
					<text class="issueTime">发布时间：{{data.createTime | formatDate}}</text>
				</view>
				<text class="price" :style="{
					color: data.type==1 ? '#FF756A' : '#666666'}">￥{{data.goodsPrice}}</text>

				<view v-if="goodsType == 0" class="more-menu-target" @click.stop="showMore(data.goodsId)">
					<!-- 更多按钮 -->
					<uni-icons color='#cfcfcf' custom-prefix="iconfont" type="icon-menu" :size="16">
					</uni-icons>

				</view>
				<view v-show="moreState" class="more-menu-container">
					<view class="gengDuoBox-container-mask" @click.stop="moreState=false">
					</view>
					<view class="gengDuoBox">
						<!-- <view class="gengDuoBoxItem" @click.stop="editGoods(data.goodsId)">修改商品</view> -->
						<view class="gengDuoBoxItem" @click.stop="downGoodsHandler(data.goodsId)"
							v-if="data.type==1">下架商品</view>
						<view class="gengDuoBoxItem" @click.stop="upGoodsHandler(data.goodsId)"
							v-if="data.type==0">上架商品</view>
						<view class="gengDuoBoxItem" @click.stop="delGoodsHandler(data.goodsId)">删除
						</view>
					</view>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moreState: false
			}
		},
    computed:{
      goodsImage(){
        let src = '';
        if(this.data){
          src = this.data.goodsImage.split(';')[0];
        }
        return src
      }
    },
		props: {
			data: { //商品对象
				type: Object,
				default: {}
			},
			pattern: { //当前是全部商品、下架商品、在售商品？
				type: String,
				required: ""
			},

			// moreState: { //当前更多商品的状态
			// 	type: Boolean
			// },
			goodsType: { //商品显示的类型
				type: Number,
				default: 0
			}
		},
		name: "goods-item",
		methods: {
			// 显示更多
			showMore(id) {
				this.moreState = true;
			},
			// 跳转到详情界面
			handleJumpDetails(id) {
				uni.navigateTo({
					url: `/pages/used/product-details/product-details?id=${id}&not2User=true`
				})
			},
			// 修改商品
			editGoods(id) {
				console.log("修改商品")
			},
			// 下架商品
			downGoodsHandler(id) {
				wx.showModal({
					title: '是否要下架该物品？',
					success: (res) => {
						if (res.confirm) {
							this.$emit("giveDownGoods", id, this.pattern)
						}
					}
				})
				this.moreState = false;
			},
			// 上架商品
			upGoodsHandler(id) {
				this.$emit("giveUpGoods", id, this.pattern)
				this.moreState = false;
			},
			// 删除商品
			delGoodsHandler(id) {
				wx.showModal({
					title: '是否删除该物品？',
					success: (res) => {
						if (res.confirm) {
							this.$emit("giveDelGoods", id, this.pattern)
						}
					}
				})
				this.moreState = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goodsItem {
		border-radius: 16rpx;
		padding: 32rpx 32rpx 28rpx 32rpx;
		box-sizing: border-box;
		background: #ffffff;
		display: flex;

		// 图片区域
		.goodsImgBox {
			position: relative;
			overflow: hidden;
			height: 156rpx;
			border-radius: 8rpx;

			.cover {
				width: 160rpx;
				height: 160rpx;
			}

			.goodsImgZaiShou {
				position: absolute;
				bottom: 0rpx;
				right: 0rpx;
				background: #3FD3D1;
				color: #ffffff;
				padding: 4rpx 5rpx;
				font-size: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
			}

			.goodsImgXiaJia {
				position: absolute;
				left: 0rpx;
				top: 0rpx;
				width: 100%;
				height: 100%;
				background: rgba(255, 255, 255, 0.5);
				display: flex;
				justify-content: center;
				align-items: center;

				view {
					width: 96rpx;
					height: 96rpx;
					background: rgba(0, 0, 0, 0.6);
					font-size: 24rpx;
					border-radius: 50%;
					color: white;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.goodsItemContent {
			margin-left: 16rpx;
			width: calc(100% - 160rpx - 16rpx);
			position: relative;

			text {
				display: block;
			}

			.goodsItemContentBox1 {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}

			.goodsTitle {
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 40rpx;
				display: -webkit-box;
				overflow: hidden;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.browseNum {
				color: #666666;
				font-size: 20rpx;
				margin-top: 7rpx;
			}

			.issueTime {
				color: #666666;
				font-size: 20rpx;
				margin-top: 5rpx;
			}

			.price {
				font-size: 32rpx;
				font-weight: bold;
				position: absolute;
				right: 0rpx;
				bottom: 10rpx;
			}

			.more-menu-target {
				color: #cccccc;
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				padding: 10rpx 40rpx;
				transform: translateX(40rpx);

				image {
					width: 8rpx;
					height: 36rpx;
				}
			}

			.more-menu-container {
				position: absolute;
				right: -32rpx;
				top: calc(40rpx + 36rpx);
				z-index: 999;
			}

			.gengDuoBox-container {
				position: relative;
			}

			.gengDuoBox-container-mask {
				position: fixed;
				width: 100vw;
				height: 100vh;
				top: 0;
				left: 0;
			}

			.gengDuoBox {
				width: 240rpx;
				box-shadow: 1px 1px 10px rgba(0, 0, 0, .2);
				border-radius: 8rpx;
				background: #ffffff;
				display: flex;
				flex-direction: column;
				padding: 8rpx;
				box-sizing: border-box;
				position: relative;

				.gengDuoBoxItem {
					color: #666666;
					font-size: 24rpx;
					font-weight: bold;
					padding: 32rpx;
					border-bottom: 1px solid #EEF2F4;

					&:last-child {
						border-bottom: 0px solid #EEF2F4;
					}
				}

				::before {
					position: absolute;
					top: -10rpx;
					right: 30rpx;
					content: '';
					width: 20rpx;
					height: 20rpx;
					background: #fff;
					transform: rotate(135deg);
					box-shadow: 2rpx -4rpx 10rpx rgba(0, 0, 0, .2);
				}

				::after {
					position: absolute;
					top: 0rpx;
					right: 15rpx;
					content: '';
					width: 60rpx;
					height: 40rpx;
					background: #fff;
				}

			}
		}
	}
</style>
